<template>
	<view class="container-white" v-if="topicList.length > 0">
		<view class="head flex-box" style="padding: 30upx 20upx;">
			<view>
				<text v-if="topicList[topicIndex].quesType == 1">单选题</text>
				<text v-if="topicList[topicIndex].quesType == 2">多选题</text>
				<text v-if="topicList[topicIndex].quesType == 3">判断题</text>
			</view>
			<view>{{ topicIndex + 1 }}/{{ topicList.length }}</view>
		</view>

		<view class="topic-box">
			<!-- <rich-text v-if='topic.quesInfo' :nodes="topic.quesInfo" class="questions"></rich-text>
      <view v-if="topic.info">{{topic.info}}</view>-->
			<rich-text v-if="topicList[topicIndex].info" :nodes="topicList[topicIndex].info" class="questions"></rich-text>
			<view class="answer">
				<view class="options" v-for="(item, index) in topicList[topicIndex].optionsBeans" @click="checkOptions(index)" :key="index">
					<view v-if="true">
						<view v-if="topicList[topicIndex].quesType == 3" class="stide" :class="item.checked ? (item.status ? 'correct' : 'mistake') : item.status ? 'correct' : ''">
							<image
								:src="item.checked ? (item.status ? '/static/icon/correct.png' : '/static/icon/error.png') : item.status ? '/static/icon/correct.png' : ''"
								style="width: 60upx;height: 60upx;"
							/>
						</view>
						<view v-else class="stide" :class="item.checked ? (item.status ? 'correct' : 'mistake') : item.status ? 'correct' : ''">
							<view v-if="!item.checked">{{ item.key }}</view>
							<image v-else :src="item.status ? '/static/icon/correct.png' : '/static/icon/error.png'" style="width: 60upx;height: 60upx;" />
						</view>
					</view>
					<view v-else>
						<view v-if="topicList[topicIndex].quesType == 3" class="stide" :class="item.checked === true ? 'isCheck' : ''"></view>
						<view v-else class="stide" :class="item.checked === true ? 'isCheck' : ''">{{ item.key }}</view>
					</view>
					<view style="flex:1">{{ item.option }}</view>
				</view>
			</view>
		</view>

		<view class="topic-box">
			<button v-if="topicList[topicIndex].quesType == 2" type="primary" size="mini" class="primary" style="width: 200upx;margin-right: 20upx;" @click="checkUserAnsw">
				确定
			</button>
			<view v-if="showAnsw" style="margin-top: 20upx;">
				<view style="font-size:28upx;color: #999999;">矿校云提醒您</view>
				<view class="flex-box">
					<view v-if="topicList[topicIndex].quesType == 3" style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{ topicList[topicIndex].rightAnsw == 'A' ? '正确' : '错误' }}</text>
					</view>
					<view v-else style="flex: 1;">
						正确答案：
						<text style="color: #02A8F4;">{{ topicList[topicIndex].rightAnsw }}</text>
					</view>
					<view v-if="topicList[topicIndex].quesType == 3" style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{ topicList[topicIndex].selfAnsw == 'A' ? '正确' : '错误' }}</text>
					</view>
					<view v-else style="flex: 1;">
						您的答案：
						<text style="color: #02A8F4;">{{ topicList[topicIndex].selfAnsw }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="footer" v-if="topicList.length > 1">
			<button v-if="topicIndex > 0 || topicIndex == topicList.length - 1" type="primary" class="primary footer-btn" @click="goPrevious">上一题</button>
			<view v-if="topicIndex > 0 && topicIndex < topicList.length - 1" class="cut-off"></view>
			<button v-if="topicIndex < topicList.length - 1" type="primary" class="primary footer-btn" @click="goNext">下一题</button>
		</view>
	</view>
</template>

<script>
import { post_md5 } from '../../common/request';
import { formatSeconds, setNavTitle } from '../../common/common';
var time = 0;
export default {
	data() {
		return {
			topicList: [],
			topicIndex: 0,
			examId: null,
			examType: '',
			quesCateId: '',
			showAnsw: false
		};
	},
	onLoad(options) {
		this.examType = options.examType;
		this.examId = options.examId ? options.examId : '';
		this.quesCateId = options.quesCateId ? options.quesCateId : '';
		this.examScoreId = options.examScoreId ? options.examScoreId : '';
		let title = '';
		if (options.examType == '1') {
			title = '正式考试';
		} else if (options.examType == '2') {
			title = '模拟考试';
		} else if (options.examType == '3') {
			title = '三违考试';
		} else if (options.examType == '4') {
			title = '每日一题';
		} else {
			title = '专业提升';
		}
		setNavTitle('我的错题-' + title);
		this.getTopic();
	},
	onNavigationBarButtonTap() {
		this.remove();
	},
	methods: {
		// 获取题目
		getTopic() {
			const params = {
				userId: uni.getStorageSync('userId'),
				errorType: this.examType,
				idInfo: this.examId
			};
			post_md5('/exam-app/error/errorqueslist', params).then(res => {
				this.topicList = res.data;
				this.topicIndex = this.topicIndex > this.topicList.length - 1 ? this.topicList.length - 1 : this.topicIndex;
			});
		},

		// 选择选项
		checkOptions(index) {
			let data = this.topicList[this.topicIndex].optionsBeans;
			if (parseInt(this.topicList[this.topicIndex].quesType) === 2) {
				if (this.topicList[this.topicIndex].selfAnsw == null) {
					data[index].checked = !data[index].checked;
					data[index].status = !data[index].status;
				}
			} else {
				data.forEach(x => {
					x.checked = false;
					x.status = false;
				});
				data[index].checked = true;
				data[index].status = true;
				this.checkUserAnsw();
			}
		},
		checkUserAnsw() {
			this.topicList[this.topicIndex].optionsBeans.forEach(x => {
				x.status = false;
				this.topicList[this.topicIndex].rightAnsw.split('').forEach(j => {
					if (x.key == j) {
						x.status = true;
					}
				});
			});
			this.topicList[this.topicIndex].selfAnsw = this.topicList[this.topicIndex].optionsBeans
				.filter(x => x.checked)
				.map(x => x.key)
				.sort()
				.join('');
			this.showAnsw = true;
		},
		// 下一题
		goNext() {
			this.showAnsw = false;
			if (this.topicIndex + 1 < this.topicList.length) {
				this.topicIndex++;
				if (this.topicList[this.topicIndex].selfAnsw) {
					this.showAnsw = true;
				}
			}
		},
		// 上一题
		goPrevious() {
			this.showAnsw = false;
			if (this.topicIndex > 0) {
				this.topicIndex--;
				if (this.topicList[this.topicIndex].selfAnsw) {
					this.showAnsw = true;
				}
			}
		},

		// 移除
		remove() {
			const params = {
				userId: this.topicList[this.topicIndex].userId,
				idInfo: this.topicList[this.topicIndex].idInfo,
				errorType: this.topicList[this.topicIndex].errorType,
				quesId: this.topicList[this.topicIndex].quesId
			};
			post_md5('/exam-app/error/delete', params).then(res => {
				if (res.code == 200) {
					this.getTopic();
					uni.showToast(
						{
							title: '已移除',
							icon: 'none'
						},
						500
					);
				}
			});
		}
	}
};
</script>

<style>
.head {
	border-top: 1px solid #ededed;
}

.menu {
	display: flex;
	font-size: 22upx;
	font-weight: 400;
	color: #333333;
	padding: 10upx 100upx;
	margin: 1px 0;
	border-bottom: 1px solid #ededed;
	text-align: center;
}

.menu-icon {
	width: 42upx;
	height: 42upx;
}

.topic-box {
	padding: 20upx;
	font-size: 28upx;
	font-weight: normal;
	color: #333333;
	line-height: 60upx;
}

.answer-button-box {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.answer-button {
	margin: 0;
}

.correct {
	background: #3ed325;
	color: #ffffff;
	border: 1px #3ed325 solid;
}

.mistake {
	background: #ec6663;
	color: #ffffff;
	border: 1px #ec6663 solid;
}

.footer {
	height: 98upx;
	font-size: 28upx;
	background: #02a8f4;
}
</style>
